<template>
	<view class="wallet-container">

		<!-- 使用记录 -->
		<view class="record-section">
			<!-- 空状态展示 -->
			<view v-if="records.length === 0" class="empty-state">
				<image src="/static/images/empty.png" mode="aspectFit"></image>
				<text>暂无退款记录</text>
			</view>
			
			<view v-else class="record-list">
				<view class="record-item" v-for="(record, index) in records" :key="record.id">
					<view class="left-area">
						<view class="record-item-type">
							退款到{{ channelTextMap[record.payChannel] || '微信' }}
							<!-- ({{ record.accountNumber }}) -->
						</view>
						<view class="record-item-date">{{ formatTime(record.createTime) }}</view>
					</view>
					<view class="right-area">
						<view class="money" :class="{
							'pending': record.status === '0',
							'success': record.status === '1',
							'failed': record.status === '2'
						}">
							- ¥{{ (record.amount / 100).toFixed(2) }}
						</view>
						<view class="money status">{{ getStatusText(record.status) }}</view>
					</view>
				</view>
				
				<!-- 加载更多 -->
				<view class="load-more" v-if="hasMore">加载更多...</view>
				<view class="load-more" v-else>没有更多数据了</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				records: [],
				page: 1,
				size: 15,
				total: 0,
				loading: false,
				hasMore: true,
				channelTextMap: {
					alipay: '支付宝',
					wechat: '微信'
				}
			}
		},
		onLoad() {
			this.loadList();
		},
		// 添加上拉触底事件
		onReachBottom() {
			if (this.hasMore && !this.loading) {
				this.page++;
				this.loadList();
			}
		},
		methods: {
			loadList() {
				if (this.loading) return;
				this.loading = true;
				
				this.$http_api.userWithdrawLog({
					page: this.page,
					size: this.size
				}).then(res => {
					const { records, total, pages } = res;
					
					if (this.page === 1) {
						this.records = records;
					} else {
						this.records = [...this.records, ...records];
					}
					
					this.total = total;
					this.hasMore = this.page < pages;
					this.loading = false;
				}).catch(() => {
					this.loading = false;
				});
			},
			formatTime(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},
			getStatusText(status) {
				const statusMap = {
					'0': '处理中',
					'1': '退款成功',
					'2': '退款失败'
				};
				return statusMap[status] || '未知状态';
			},
			getStatusClass(status) {
				const statusClassMap = {
					'0': 'pending',
					'1': 'success',
					'2': 'failed'
				};
				return statusClassMap[status];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wallet-container {
		background-color: #fff;
		min-height: 100vh;

		.record-section {
			background-color: #fff;
			padding: 0 40rpx;

			.record-list {
				.record-item {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 0;
					border-bottom: 1rpx solid #eeeeee;

					.left-area {
						.record-item-type {
							font-size: 27rpx;
							color: #333333;
							font-weight: 500;
							padding: 10rpx 0;

							&.withdraw {
								color: #FE6601
							}

							&.consume {
								color: #1C6EFB;
							}
						}

						.record-item-date {
							color: #777777;
							font-size: 24rpx;
							font-weight: 400;
							margin-top: 10rpx;
						}
					}

					.right-area {
						.money {
							margin-top: 10rpx;
							font-size: 28rpx;
							font-weight: 600;
						}
					}
				}
			}
		}

		.empty-state {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;
			
			image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 20rpx;
			}
			
			text {
				color: #999;
				font-size: 28rpx;
			}
		}

		.load-more {
			text-align: center;
			padding: 20rpx 0;
			color: #999;
			font-size: 24rpx;
		}

		.money {
			&.pending {
				color: #999999;
			}
			
			&.success {
				color: #42E0A2;
			}
			
			&.failed {
				color: #FC0A01;
			}
			
			&.status {
				font-size: 24rpx;
				color: #666;
				text-align: right;
				font-weight: normal!important;
			}
		}
	}
</style>